@import '@/styles/index.scss';

.index-page {
  width: 100%;

  .card-style {
    position: relative;
    width: 100%;
    padding-bottom: 128rpx;

    .lbg {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 0;

      .image {
        display: block;
        width: 100%;
        height: 100%;
      }
    }

    .wrapper {
      position: relative;
      padding: 20rpx;
      z-index: 2;
      word-break: break-all;
      word-wrap: break-word;

      .user {
        position: relative;
        height: 440rpx;
        border-radius: 10rpx;
        background-color: #fff;
        overflow: hidden;
        margin-bottom: $pd;

        .bg {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 440rpx;

          .image {
            display: block;
            width: 100%;
            height: 100%;
          }
        }
      }

      .template {
        position: relative;
        padding: $pd 20rpx;
        border-radius: 10rpx;
        background-color: #fff;
        margin-bottom: $pd;

        .title {
          position: absolute;
          top: 0;
          left: 50%;
          width: 320rpx;
          height: 60rpx;
          line-height: 60rpx;
          margin-left: -160rpx;
          background-color: #c8161d;
          color: #fff;
          text-align: center;
          border-radius: 0 0 10rpx 10rpx;
          box-shadow: 10rpx 10rpx 20rpx $fc-off;
        }
      }

      .company {

        .profile {
          padding-top: $pd;
          line-height: 50rpx;
        }
      }

      .honors {

        .list {
          padding-top: $pd;

          .item {
            display: flex;

            .index {
              min-width: 50rpx;
            }

            .content {
              line-height: 50rpx;
            }
          }
        }
      }

      .career {

        .list {
          padding-top: $pd;

          .item {

            &:not(:last-child) {
              margin-bottom: 20rpx;
            }

            .image {
              display: block;
              width: 100%;
            }
          }
        }
      }

      .video {

        .list {
          padding-top: $pd;

          .item {

            &:not(:last-child) {
              margin-bottom: 20rpx;
            }

            .video-box {
              display: block;
              width: 100%;
              height: 400rpx;
            }
          }
        }
      }

      .empty {
        padding-top: $pd;
        text-align: center;
      }
    }
  }

  .first-style {
    position: relative;

    .wrapper {

      .user {

        .nick {
          position: absolute;
          top: 0;
          left: 0;
          bottom: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          width: 260rpx;
          color: #fff;

          .name {
            font-size: 36rpx;
            font-weight: bold;
            margin-bottom: 10rpx;
          }

          .job {
            padding-bottom: 20rpx;
          }
        }

        .logo {
          position: absolute;
          top: 20rpx;
          right: $pd;
          width: 120rpx;
          height: 120rpx;

          .image {
            display: block;
            width: 100%;
          }
        }

        .company-name {
          position: absolute;
          top: $pd;
          left: 50%;
          transform: translate(-60%, 0);
          font-size: $fsl;
          font-weight: bold;
          text-shadow: 0rpx 0rpx 20rpx #fff;
          color: #000;
          white-space: nowrap;
        }

        .info-list {
          position: absolute;
          top: 180rpx;
          left: 300rpx;
          right: 20rpx;

          .item {
            display: -webkit-flex;
            display: -moz-flex;
            display: -ms-flex;
            display: -o-flex;
            display: flex;
            align-items: center;
            margin-bottom: 10rpx;

            .icon {
              width: 40rpx;
              height: 40rpx;

              .image {
                display: block;
                width: 100%;
                height: 100%;
              }
            }

            .text {
              width: 350rpx;
              padding-left: 10rpx;
              // white-space: nowrap;
              // text-overflow: ellipsis;
              // overflow: hidden;
            }
          }
        }

        .company-subCompany {
          position: absolute;
          top: $pd;
          left: 50%;
          transform: translate(-60%, 0);
          font-size: $fsl;
          font-weight: bold;
          color: #000;
          white-space: nowrap;
        }

        .company-info {
          position: absolute;
          top: 45%;
          left: $pd;
          width: 500rpx;
          transform: translate(0, -50%);

          .item {
            line-height: 40rpx;

            .text {
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 3;
              -webkit-box-orient: vertical;
              color: #fff;
            }
          }
        }

        .company-logo {
          position: absolute;
          top: 50%;
          right: $pd;
          display: -webkit-flex;
          display: -moz-flex;
          display: -ms-flex;
          display: -o-flex;
          display: flex;
          justify-content: center;
          flex-direction: column;
          text-align: center;
          transform: translate(0, -50%);

          .icon {
            display: inline-block;
            width: 120rpx;
            height: 120rpx;
            background-color: #fff;

            .image {
              display: block;
              width: 100%;
              height: 100%;
            }
          }

          .text {
            font-size: $fss;
            color: #fff;
          }
        }
      }
    }
  }

  .second-style {
    position: relative;

    .wrapper {

      .user {

        .nick {
          position: absolute;
          top: 120rpx;
          left: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          width: 460rpx;
          text-align: center;

          .name {
            font-size: $fsl;
            margin-bottom: 10rpx;
          }

          .job {
            padding-bottom: 20rpx;
          }
        }

        .company-name {
          position: absolute;
          top: $pd;
          left: 50%;
          transform: translate(-50%, 0);
          font-size: $fsl;
          font-weight: bold;
          text-shadow: 0rpx 0rpx 20rpx #fff;
          color: #000;
          white-space: nowrap;
        }

        .logo {
          position: absolute;
          top: 50%;
          right: $pd;
          width: 160rpx;
          height: 160rpx;
          border: 4rpx solid #dbe4cc;
          border-radius: 50%;
          overflow: hidden;
          transform: translate(0, -50%);

          .image {
            display: block;
            width: 100%;
            height: 100%;
          }
        }

        .info-list {
          position: absolute;
          top: 240rpx;
          left: 80rpx;
          right: 20rpx;

          .item {
            display: -webkit-flex;
            display: -moz-flex;
            display: -ms-flex;
            display: -o-flex;
            display: flex;
            align-items: center;
            margin-bottom: 10rpx;

            .icon {
              width: 40rpx;
              height: 40rpx;

              .image {
                display: block;
                width: 100%;
                height: 100%;
              }
            }

            .text {
              width: 350rpx;
              padding-left: 10rpx;
              // white-space: nowrap;
              // text-overflow: ellipsis;
              // overflow: hidden;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 3;
              -webkit-box-orient: vertical;
            }
          }
        }

        .company-subCompany {
          position: absolute;
          top: $pd;
          left: 50%;
          transform: translate(-50%, 0);
          font-size: $fsl;
          font-weight: bold;
          color: #000;
          white-space: nowrap;
        }

        .company-info {
          position: absolute;
          top: 50%;
          left: $pd;
          width: 500rpx;
          transform: translate(0, -20%);

          .item {
            line-height: 40rpx;

            .text {
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 3;
              -webkit-box-orient: vertical;
            }
          }
        }

        .company-logo {
          position: absolute;
          top: 50%;
          right: $pd;
          width: 160rpx;
          height: 160rpx;
          border: 4rpx solid #c4c7b5;
          overflow: hidden;
          transform: translate(0, -80%);

          .icon {
            display: inline-block;
            width: 100%;
            height: 100%;
            background-color: #fff;

            .image {
              display: block;
              width: 100%;
              height: 100%;
            }
          }

          .text {
            font-size: $fss;
            color: #fff;
          }
        }
      }

      .template {

        .title {
          background-color: #dbe4ce;
          color: #333;
        }
      }
    }
  }

  .third-style {
    position: relative;

    .wrapper {

      .user {
        color: #e1d290;

        .nick {
          position: absolute;
          top: 100rpx;
          left: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          width: 460rpx;
          text-align: center;

          .name {
            font-size: $fsl;
            margin-bottom: 10rpx;
          }

          .job {
            padding-bottom: 20rpx;
          }
        }

        .company-name {
          position: absolute;
          top: 30rpx;
          left: 50%;
          transform: translate(-60%, 0);
          font-size: $fsl;
          font-weight: bold;
          white-space: nowrap;
        }

        .logo {
          position: absolute;
          top: 50%;
          right: $pd;
          width: 160rpx;
          height: 160rpx;
          border: 4rpx solid #dbe4cc;
          border-radius: 50%;
          overflow: hidden;
          transform: translate(0, -50%);

          .image {
            display: block;
            width: 100%;
            height: 100%;
          }
        }

        .info-list {
          position: absolute;
          top: 220rpx;
          left: 80rpx;
          right: 20rpx;

          .item {
            display: -webkit-flex;
            display: -moz-flex;
            display: -ms-flex;
            display: -o-flex;
            display: flex;
            align-items: center;
            margin-bottom: 10rpx;

            .icon {
              width: 40rpx;
              height: 40rpx;
              padding: 5rpx;
              background-color: #e1d290;

              .image {
                display: block;
                width: 100%;
                height: 100%;
              }
            }

            .text {
              width: 350rpx;
              padding-left: 10rpx;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 3;
              -webkit-box-orient: vertical;
            }
          }
        }

        .company-subCompany {
          position: absolute;
          top: $pd;
          left: 50%;
          transform: translate(-60%, 0);
          font-size: $fsl;
          font-weight: bold;
          white-space: nowrap;
        }

        .company-info {
          position: absolute;
          top: 50%;
          left: $pd;
          width: 500rpx;
          transform: translate(0, -20%);

          .item {
            line-height: 40rpx;

            .text {
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 3;
              -webkit-box-orient: vertical;
            }
          }
        }

        .company-logo {
          position: absolute;
          top: 50%;
          right: $pd;
          width: 160rpx;
          height: 160rpx;
          border: 4rpx solid #c4c7b5;
          overflow: hidden;
          transform: translate(0, -80%);

          .icon {
            display: inline-block;
            width: 100%;
            height: 100%;
            background-color: #fff;

            .image {
              display: block;
              width: 100%;
              height: 100%;
            }
          }

          .text {
            font-size: $fss;
            color: #fff;
          }
        }
      }

      .template {

        .title {
          background-color: #172434;
          color: #e1d290;
        }
      }
    }
  }

  .fourth-style {
    position: relative;

    .wrapper {

      .user {

        .nick {
          position: absolute;
          top: $pd;
          left: $pd;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: row;
          text-align: center;

          .name {
            font-size: $fsl;
            color: #30aeb3;
          }

          .job {
            margin-left: 20rpx;
            margin-top: 10rpx;
          }
        }

        .company-name {
          position: absolute;
          bottom: 66rpx;
          left: $pd;
          font-size: $fsl;
          font-weight: bold;
          white-space: nowrap;
          color: #fff;
        }

        .logo {
          position: absolute;
          bottom: 110rpx;
          right: 20rpx;
          width: 160rpx;
          height: 160rpx;
          border: 4rpx solid #685d56;
          overflow: hidden;

          .image {
            display: block;
            width: 100%;
            height: 100%;
          }
        }

        .info-list {
          position: absolute;
          top: 140rpx;
          left: $pd;
          right: 20rpx;

          .item {
            display: -webkit-flex;
            display: -moz-flex;
            display: -ms-flex;
            display: -o-flex;
            display: flex;
            align-items: center;
            margin-bottom: 10rpx;

            .icon {
              width: 40rpx;
              height: 40rpx;

              .image {
                display: block;
                width: 100%;
                height: 100%;
              }
            }

            .text {
              width: 400rpx;
              padding-left: 10rpx;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 3;
              -webkit-box-orient: vertical;
            }
          }
        }

        .company-subCompany {
          position: absolute;
          bottom: 80rpx;
          left: $pd;
          font-size: $fsl;
          font-weight: bold;
          white-space: nowrap;
          color: #fff;
        }

        .company-info {
          position: absolute;
          top: 50%;
          left: $pd;
          width: 500rpx;
          transform: translate(0, -85%);

          .item {
            line-height: 40rpx;

            .text {
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 3;
              -webkit-box-orient: vertical;
              color: #fff;
            }
          }
        }

        .company-logo {
          position: absolute;
          bottom: 124rpx;
          right: 20rpx;
          width: 160rpx;
          height: 160rpx;
          border: 4rpx solid #394742;
          overflow: hidden;

          .icon {
            display: inline-block;
            width: 100%;
            height: 100%;
            background-color: #fff;

            .image {
              display: block;
              width: 100%;
              height: 100%;
            }
          }
        }
      }

      .template {

        .title {
          background-color: #30aeb3;
          color: #fff;
        }
      }
    }
  }

  .bg-music {
    position: fixed;
    top: 20rpx;
    right: 20rpx;
    z-index: 10;

    .icon {
      width: 60rpx;
      height: 60rpx;

      &.on {
        animation: rate 2s infinite linear;
        transform-origin: center;
      }

      .image {
        display: block;
        width: 100%;
        height: 100%;
      }
    }
  }

  .collect-btn {
    position: fixed;
    top: 20rpx;
    left: 20rpx;
    z-index: 10;

    .icon {
      width: 60rpx;
      height: 60rpx;

      .image {
        display: block;
        width: 100%;
        height: 100%;
      }
    }
  }
}

@keyframes rate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}